<template>
    <div class="rectangle-button" @click="handleClick">
      <div :style="{ backgroundColor: color1 }"></div>
      <div :style="{ backgroundColor: color2 }"></div>
    </div>
  </template>
  
  <script>
  export default {
    name: "ColoredButton",
    props: {
      color1: {
        type: String,
        default: "#007bff", // 默认颜色：蓝色
      },
      color2: {
        type: String,
        default: "#dc3545", // 默认颜色：红色
      },
      onClick: {
        type: Function,
        default: () => {},
      },
    },
    methods: {
      handleClick() {
        this.onClick();
      },
    },
  };
  </script>
  
  <style scoped>
  .rectangle-button {
    display: flex;
    width: 100px;
    height: 50px;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .rectangle-button div {
    flex: 1;
  }
  
  .rectangle-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  }
  </style>
  